<script setup>
import {reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const uploader = ref();

const eid = ref(localStorage.getItem('eid'));

const coachIntroduction = reactive({
  data: {},
})
const configEreaVisible = ref(false);
const uploadAvatarEreaVisible = ref(false);

const avatar = ref({
  imageUrl: '',
  hasUrl: false
})

const save = () => {
  const eid = localStorage.getItem('eid')
  axios.post('http://localhost:8080/v1/coach/intro/edit', {
    eid: eid,
    text1: coachIntroduction.data.text1,
    text2: coachIntroduction.data.text2,
  }).then(response => {
    if (response.data.state === 2001) {
      ElMessage.success("保存成功")
    } else {
      ElMessage.error("保存失败")
      console.log(response.data)
    }
  })
}

const handleAvatarChange = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    avatar.value.imageUrl = e.target.result; // 更新预览图
    avatar.value.hasUrl = true;
  };
  reader.readAsDataURL(file.raw); // 读取文件内容
}
const handleAvatarSuccess = (response) => {
  avatar.value.imageUrl = ''
  avatar.value.hasUrl = false
  console.log("response",response)
  console.log("avatar",avatar)
  if (response.state === 2001){
    ElMessage.success('上传成功')
  }else {
    ElMessage.error("上传失败")
  }
  uploader.value=null;
}

const submitUpload = () => {
  if (uploader.value) {
    uploader.value.submit(); // 手动触发上传
  }
};

const load = () => {
  const eid = localStorage.getItem('eid')
  console.log(eid)
  axios.get('http://localhost:8080/v1/coach/intro/view?eid=' + eid).then(response => {
    if (response.data.state === 2001) {
      console.log(response.data.data)
      coachIntroduction.data = response.data.data
      console.log("coach:", coachIntroduction.data)
    } else {
      coachIntroduction.data = {
        text1: "暂无",
        text2: "暂无",
      }
    }
  })
}

load()
</script>

<template>
  <div class="bg">
    <el-container>
      <el-header>
        <el-text size="large" tag="b">账户设置</el-text>
        <hr>
      </el-header>
    </el-container>
    <el-container>
      <el-aside width="150px">
        <el-card shadow="always" width="100%" style="background-color: rgba(0,0,0,0);border: 0">
          <el-button type="primary" class="operate_button"
                     @click="configEreaVisible = true;uploadAvatarEreaVisible = false">
            编辑简历
          </el-button>
          <br>
          <el-button type="primary" class="operate_button"
                     @click="uploadAvatarEreaVisible = true;configEreaVisible=false">
            上传头像
          </el-button>
        </el-card>
      </el-aside>
      <el-main>
        <el-card shadow="always" width="100%">
          <div v-if="configEreaVisible">
            <el-form :model="coachIntroduction.data" label-width="100px" label-position="left">
              <el-form-item label="简介">
                <el-input v-model="coachIntroduction.data.text1" type="textarea" :rows="1"></el-input>
              </el-form-item>
              <el-form-item label="详细简介">
                <el-input v-model="coachIntroduction.data.text2" type="textarea" :rows="5"></el-input>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="configEreaVisible = false">返回</el-button>
          </div>
          <div v-if="uploadAvatarEreaVisible">
            <el-header>上传头像</el-header>
            <el-upload
                ref="uploader"
                class="avatar-uploader"
                action="http://localhost:8080/v1/upload/e_avatar"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-change="handleAvatarChange"
                :data="{ eid: eid }"
                :auto-upload="false"
                accept=".jpg,.jpeg,.png"
            >
              <img v-if="avatar.hasUrl" :src="avatar.imageUrl" class="avatar"  alt=""/>
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <el-button type="primary" @click="submitUpload" style="margin-top: 20px">上传头像</el-button>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.bg {
  color: black;
  text-align: center;
  margin: 0;
  padding: 0;
}

.operate_button {
  margin-bottom: 10px;
}

.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>